<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
    <cpn1></cpn1>
    <cpn2></cpn2>
</div>


<script src="../js/vue.js"></script>
<script>
  // 1.全局组件注册的语法糖
  // 1.创建组件构造器
  const cpn1 = Vue.extend({
      template: `<div>
                    <h2>我是标题</h2>
                    <p>我是内容，哈哈哈哈或</p>
                  </div>
                 `
  })

  // 2.注册组件
  Vue.component('cpn1',cpn1)


  // 语法糖写法，直接使用Vue.component，在第二个参数中定义模板
  Vue.component('cpn1',{
      template: `<div>
                    <h2>我是标题</h2>
                    <p>我是内容，哈哈哈哈或</p>
                  </div>
                 `
  })

    const app = new Vue({
        el:'#app',
        data:{
            message:'你好呀'
        },
        //注册局部组件的语法糖，就是直接在Vue实例中添加一个components对象，在对象中直接定义模板
        components:{
            'cpn2':{
                template: `<div>
                    <h2>我是标题2</h2>
                    <p>我是内容2，哈哈哈哈或2222</p>
                  </div>
                 `
            }
        }
    })
</script>
</body>
</html>